<template>
    <div id="guagechart">
        <div id="gauge"></div>
        <div id="gaugeData">
            <el-button type="primary" plain @click="RandomData">随机数</el-button>
        </div>
    </div>
</template>
<script>
import {ResponsiveGaugeChart} from './ResponsiveGaugeChart'
export default {
  data () {
    return {
      chart: '',
      data: 45
    }
  },
  created () {
    this.chart = new ResponsiveGaugeChart('gauge')
    this.chart.data = this.data
    this.chart.innerRadius = 80
    this.chart.outerRadius = 100
  },
  mounted () {
    this.chart.positionX = document.getElementById('gauge').offsetWidth / 2
    this.chart.positionY = document.getElementById('gauge').offsetHeight / 2
    this.chart.initGauge()
    this.chart.update()
  },
  methods: {
    RandomData () {
      let data = parseFloat(Math.random() * 100).toFixed(0)
      this.chart.data = data
      this.chart.update()
    }
  }
}
</script>
<style scoped>
#guagechart {
    height: 100%;
    width: 100%;
}
#gauge {
    height: 70%;
    width: 100%;
}
#gaugeData {
    height: 30%;
    width: 100%;
}
</style>
